<template>
  <el-scrollbar ref="scrollContainer" :vertical="false" class="scroll-container" @wheel.native.prevent="handleScroll">
    <slot/>
  </el-scrollbar>
</template>

<script>
import {onMounted, unref} from "vue";

export default {
  name: "mine-scroll-pane",
  setup() {
    const scrollWrapper = unref('scrollContainer')
    const handleScroll = (e) => {
      const eventDelta = e.wheelDelta || -e.deltaY * 40
      const $scrollWrapper = scrollWrapper.value
      $scrollWrapper.scrollLeft = $scrollWrapper.scrollLeft + eventDelta / 4
    }
    onMounted(() => {
      // scrollWrapper.addEventListener('scroll', this.emitScroll, true)
      // scrollWrapper.addEventListener('scroll', '', true)
    })
    return {

      handleScroll
    }
  }
}
</script>

<style lang="scss">
.el-scrollbar {
  margin: 2px auto ;
}

</style>
